<template>
  <div class="data-cleaning">
    <!-- 清洗按钮 -->
    <div class="clean-button-container" v-if="!showResult">
      <el-button type="primary" size="large" @click="startCleaning" :loading="loading">
        开始数据清洗融合
      </el-button>
    </div>

    <!-- 结果展示 -->
    <div v-if="showResult" class="result-container">
      <h3>数据融合表</h3>
      <el-table :data="mergedData" style="width: 100%">
        <el-table-column prop="Name" label="姓名"></el-table-column>
        <el-table-column prop="Sex" label="性别">
          <template #default="scope">
            {{ sexMap[scope.row.Sex] || scope.row.Sex }}
          </template>
        </el-table-column>
        <el-table-column prop="Age" label="年龄"></el-table-column>
        <el-table-column prop="Height" label="身高"></el-table-column>
        <el-table-column prop="Weight" label="体重"></el-table-column>
        <el-table-column prop="Team" label="团队"></el-table-column>
        <el-table-column prop="NOC" label="国家奥委会代码"></el-table-column>
        <el-table-column prop="Games" label="比赛"></el-table-column>
        <el-table-column prop="Year" label="年份"></el-table-column>
        <el-table-column prop="Season" label="季节">
          <template #default="scope">
            {{ seasonMap[scope.row.Season] || scope.row.Season }}
          </template>
        </el-table-column>
        <el-table-column prop="City" label="城市"></el-table-column>
        <el-table-column prop="Sport" label="运动项目"></el-table-column>
        <el-table-column prop="Event" label="赛事"></el-table-column>
        <el-table-column prop="Medal" label="奖牌">
          <template #default="scope">
            {{ medalMap[scope.row.Medal] || '无' }}
          </template>
        </el-table-column>
        <el-table-column prop="region" label="地区"></el-table-column>
        <el-table-column prop="notes" label="备注"></el-table-column>
      </el-table>

      <!-- 总记录数信息 -->
      <div class="total-info">
        <p>总记录数：{{ total }}</p>
      </div>

      <h3>数据表缺失值信息</h3>
      <el-table :data="infoData" style="width: 100%">
        <el-table-column prop="Column" label="列名"></el-table-column>
        <el-table-column prop="Count" label="数量"></el-table-column>
        <el-table-column prop="Dtype" label="数据类型"></el-table-column>
        <el-table-column prop="Non-Null" label="非空值"></el-table-column>
      </el-table>

    </div>

    <!-- 加载提示框 -->
    <el-dialog
      v-model="loading"
      title="数据处理中"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="loading-content">
        <el-icon class="is-loading"><Loading /></el-icon>
        <p>正在进行数据融合清洗，请稍候...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { Loading } from '@element-plus/icons-vue'

// 状态变量
const loading = ref(false)
const showResult = ref(false)
const mergedData = ref([])
const infoData = ref([])
const total = ref('0')

// 添加映射对象
const sexMap = {
  'M': '男',
  'F': '女'
}

const seasonMap = {
  'Summer': '夏季',
  'Winter': '冬季'
}

const medalMap = {
  'Gold': '金牌',
  'Silver': '银牌',
  'Bronze': '铜牌',
  'NA': '无'
}

// 开始清洗数据
const startCleaning = async () => {
  loading.value = true
  try {
    const response = await axios.get('http://127.0.0.1:5000/noc_person')
    if (response.data.success) {
      mergedData.value = response.data.data
      infoData.value = response.data.info
      total.value = response.data.total
      showResult.value = true
      // 保存数据到 localStorage
      localStorage.setItem('cleaningData', JSON.stringify({
        mergedData: response.data.data,
        infoData: response.data.info,
        total: response.data.total
      }))
      ElMessage.success(response.data.msg)
    } else {
      ElMessage.error(response.data.msg)
    }
  } catch (error) {
    console.error('数据清洗失败：', error)
    ElMessage.error('数据清洗失败')
  } finally {
    loading.value = false
  }
}

// 组件挂载时检查是否有缓存数据
onMounted(() => {
  const cachedData = localStorage.getItem('cleaningData')
  if (cachedData) {
    const data = JSON.parse(cachedData)
    mergedData.value = data.mergedData
    infoData.value = data.infoData
    total.value = data.total
    showResult.value = true
  }
})

// // 组件卸载时清除缓存数据
// onUnmounted(() => {
//   localStorage.removeItem('cleaningData')
// })
</script>

<style scoped>
.data-cleaning {
  padding: 20px;
}

.clean-button-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.result-container {
  margin-top: 20px;
}

.result-container h3 {
  margin: 20px 0;
  color: #409EFF;
}

.loading-content {
  text-align: center;
  padding: 20px;
}

.loading-content .el-icon {
  font-size: 24px;
  color: #409EFF;
  margin-bottom: 10px;
}

.total-info {
  margin-top: 20px;
  text-align: left;
  font-weight: bold;
  color: #409EFF;
}
</style>
